<!DOCTYPE html>
<html>
<head>
  <title>Active Citizen</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="lib/jquery.mobile-1.2.0.min.css" />
  
  <!-- some simple styling for the Active Citizen view -->
  <!-- required libraries -->
  <link rel="stylesheet" href="style.css" />
  
  <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&language=el"></script>
 
 
  <script type="text/javascript" src="lib/cordova-2.1.0.js"></script>
  <script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="lib/jquery.mobile-1.2.0.min.js"></script>
  <script type="text/javascript" src="lib/jquery.jsonp-2.1.4.min.js"></script>
  <script type="text/javascript" src="lib/knockout.min.js"></script>
  <script type="text/javascript" src="lib/iscroll.js"></script>
  <script type="text/javascript" src="lib/jquery.mobile.iscrollview.js"></script>
  <script type="text/javascript" src="lib/jquery.geocomplete.js"></script>
  <script type="text/javascript" src="lib/jquery.simulate.js"></script>
  <script type="text/javascript" src="services/autocompleteService.js"></script>
 
  
  
  <!-- the various view models -->
  <script type="text/javascript" src="viewModel/viewModelReports.js" ></script>
  <script type="text/javascript" src="viewModel/viewModelPerson.js" ></script>
  <!-- the code that puts it all together -->
  <script type="text/javascript" src="app.js" ></script>
  
  
</head>
<body>

<div data-role="page" data-theme="b" data-add-back-btn="true" id="page3">
<div data-role="header" data-theme="b">
      <h1>Address</h1>
</div>
<div data-role="content" data-theme="c" style="padding:3px">
	<div class="ui-grid-a">
	<div class="ui-block-a" style="width:90%">
		<input type="search" id="input" data-bind="value: currentAddress" type="text" name="address" value="Ζωγράφου">
		<!-- div id="logo"></div-->
		<ul id="results"></ul>
	</div>
	<div class="ui-block-b" style="width:10%"><img src="images/gps.png" style="padding:5px"></div>
	</div>
	<div align="center" id="map_canvas"></div>
</div>
</div>



<!-- ### A page that renders the Reports List -->

<div data-role="page" data-theme="b" id="page1">
<div data-role="header" data-theme="b">
      <h1>ActiveCitizen</h1>
	  <a href="#page2" data-icon="plus" class="ui-btn-right">Προσθήκη</a>
</div>
<div data-role="content" data-theme="c">
	  <ul id="report-list" data-role="listview" data-split-icon="grid" data-split-theme="b" data-bind="foreach: reports">
		<li>
			<a data-bind="text: address, click: $root.editItem" href="#page2"></a>
			<a data-bind="click: $root.removeItem"></a>
		</li>	
	  </ul>
</div>
</div>



<!-- ### A page that renders the Report Form -->
<div data-role="page" data-theme="b" data-add-back-btn="true" id="page2">
<div data-role="header" data-theme="b">
      <h1>ActiveCitizen</h1>
</div>
<div data-role="content" data-theme="c">
	<label for="select-choice-nc" class="select">Κατηγορία Αιτήματος</label>
	<select data-bind="value: currentCategory" name="select-choice-8" id="select-choice-nc">
	<optgroup label="Βλάβες">
		<option value="Κλάδεμα, κοπή δέντρου">Κλάδεμα, κοπή δέντρου</option>
		<option value="Πινακίδες Σήμανσης και καθρέπτες">Πινακίδες Σήμανσης και καθρέπτες</option>
		<option value="Βλάβες οδοστρώματος">Βλάβες οδοστρώματος</option>
		<option value="Συντήρηση κοινόχρηστων χώρων">Συντήρηση κοινόχρηστων χώρων</option>
		<option value="Βλάβη στο δημοτικό φωτισμό">Βλάβη στο δημοτικό φωτισμό</option>
	</optgroup>
	<optgroup label="Διάφορα">
		<option value="Πολεοδομικά θέματα">Πολεοδομικά θέματα</option>
		<option value="Λοιπά θέματα">Λοιπά θέματα</option>
	</optgroup>
	</select>
	
	<label>Διεύθυνση:</label>
	<input id="geocomplete" data-bind="value: currentAddress" type="text" name="address" value=""  />
	
	<label for="textarea-a">Περιγραφή αιτήματος</label>
	<textarea data-bind="value: currentDescription" name="textarea" id="textarea-a"></textarea>
	
	<label>Συνημμένα:</label>
	<input type="text" name="photos" value=""  />
	
	<a href="#person">Προσωπικά Στοιχεία</a>
	<!-- ko ifnot: editing -->
	<a data-bind="click: add" data-role="button" data-theme="a" href="#page1">Προσθήκη</a>
	<!-- /ko -->
	<!-- ko if: editing -->
	<a data-bind="click: replaceItem" data-role="button" data-theme="a" href="#page1">Ενημέρωση</a>
	<!-- /ko -->
  
    <!--div id="footer" data-role="footer" data-position="fixed" data-theme="e">		
	<div data-role="navbar">
		<ul>
			<li><a href="#">Διαγραφή</a></li>
			<li><a href="#">Αποθήκευση</a></li>
			<li><a href="#">Ακύρωση</a></li>
		</ul>
	</div><!-- /navbar -->
	<!--/div><!-- /footer -->
</div>
</div>






<!-- ### A page that renders the Person Form -->
  <div data-role="page" data-theme="b" data-add-back-btn="true" id="person">
    <div data-role="header" data-theme="b">
      <h1>Στοιχεία</h1>
    </div>
    <div data-role="content" data-theme="c">
      <div data-bind="with: person.data">
	    <label>Όνομα:</label>
        <input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
		<label>Επώνυμο:</label>
		<input data-bind="value: surname, valueUpdate: 'afterkeydown'"></input>
		<label>Διεύθυνση:</label>
		<input data-bind="value: address, valueUpdate: 'afterkeydown'"></input>
		<label>Τηλέφωνο:</label>
		<input data-bind="value: phone, valueUpdate: 'afterkeydown'" type="tel"></input>
      </div>
	  <button data-bind="click: person.save">Αποθήκευση</button>
    </div>
  </div>
  
  

</body>
</html>
